<!DOCTYPE html>
<html>
<head>
  <style>
    /* 初始状态完全隐藏（在屏幕右侧不可见区域） */
    #custom-sidebar {
      position: fixed;
      right: -350px; /* 完全移出可视区域 */
      top: 0;
      width: 350px;
      height: 100vh;
      background: white;
      box-shadow: -2px 0 10px rgba(0,0,0,0.1);
      transition: right 0.3s ease-out; /* 平滑滑动效果 */
      z-index: 1000;
      padding: 15px;
      overflow-y: auto;
    }

    /* 激活时滑入可视区域 */
    #custom-sidebar.active {
      right: 0;
    }

    /* 标签页样式 */
    .sidebar-tabs { display: flex; margin-bottom: 15px; }
    .tab-btn {
      padding: 8px 15px;
      background: #f0f0f0;
      border: none;
      cursor: pointer;
      font-family: monospace;
    }
    .tab-btn.active { 
      background: #1890ff; 
      color: white; 
    }

    /* 表格样式 */
    .tab-content table {
      width: 100%;
      border-collapse: collapse;
      font-family: monospace;
      font-size: 12px;
    }
    .tab-content th {
      background: #f7f7f7;
      position: sticky;
      top: 0;
    }
    .tab-content th, .tab-content td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }

    /* 主界面按钮 */
    #toggle-sidebar {
      position: fixed;
      right: 20px;
      top: 20px;
      z-index: 999;
      padding: 8px 15px;
      background: #1890ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 主界面按钮 -->
  <button id="toggle-sidebar">显示寄存器信息</button>

  <!-- 侧边栏 (初始完全隐藏) -->
  <div id="custom-sidebar">
    <div class="sidebar-tabs">
      <button class="tab-btn active" data-tab="registers">寄存器</button>
      <button class="tab-btn" data-tab="stack">函数栈</button>
    </div>
    
    <!-- 寄存器标签页 -->
    <div id="registers-tab" class="tab-content active">
      <table>
        <thead>
          <tr><th>名称</th><th>新值(hex)</th><th>旧值(hex)</th></tr>
        </thead>
        <tbody id="register-data">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
    
    <!-- 函数栈标签页 -->
    <div id="stack-tab" class="tab-content">
      <h4>函数调用栈</h4>
      <table>
        <thead>
          <tr><th>函数名</th><th>文件路径</th><th>地址</th></tr>
        </thead>
        <tbody id="stack-data">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
      
      <h4>局部变量</h4>
      <table>
        <thead>
          <tr><th>变量名</th><th>值</th><th>数据类型</th></tr>
        </thead>
        <tbody id="locals-data">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
  </div>

  <script>
    // 模拟数据加载
    function loadData() {
      // 寄存器数据
      const registers = [
        { name: 'R0', newVal: '0x0000000A', oldVal: '0x20000000' },
        { name: 'R1', newVal: '0xE000E000', oldVal: '0x001D0000' },
        { name: 'R2', newVal: '0x00000005', oldVal: '0x08000000' },
        { name: 'R3', newVal: '0x00000005', oldVal: '0x08000135' },
        { name: 'R4', newVal: '0x40010800', oldVal: '0x00000000' }
      ];
      
      // 函数栈数据
      const stack = [
        { func: 'delay', path: 'SYSTEM/delay/dela...', addr: '0x0800074' },
        { func: 'main', path: 'USER/main.c25', addr: '0x0800072a' }
      ];
      
      // 局部变量
      const locals = [
        { name: 'i', value: '5', type: 'uint32_t' },
        { name: 'nms', value: '10', type: 'uint32_t' }
      ];
      
      // 渲染表格
      renderTable('#register-data', registers, ['name', 'newVal', 'oldVal']);
      renderTable('#stack-data', stack, ['func', 'path', 'addr']);
      renderTable('#locals-data', locals, ['name', 'value', 'type']);
    }

    // 通用表格渲染函数
    function renderTable(selector, data, fields) {
      const tbody = document.querySelector(selector);
      tbody.innerHTML = data.map(item => 
        `<tr>${fields.map(f => `<td>${item[f]}</td>`).join('')}</tr>`
      ).join('');
    }

    // 切换侧边栏显示/隐藏
    document.getElementById('toggle-sidebar').addEventListener('click', function() {
      const sidebar = document.getElementById('custom-sidebar');
      sidebar.classList.toggle('active');
      
      // 如果是打开状态则加载数据
      if (sidebar.classList.contains('active')) {
        loadData();
      }
      
      // 更新按钮文字
      this.textContent = sidebar.classList.contains('active') 
        ? '隐藏寄存器信息' 
        : '显示寄存器信息';
    });

    // 标签页切换
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.tab-btn').forEach(b => 
          b.classList.remove('active'));
        this.classList.add('active');
        
        // 切换内容
        document.querySelectorAll('.tab-content').forEach(c => 
          c.classList.remove('active'));
        document.getElementById(`${this.dataset.tab}-tab`)
          .classList.add('active');
      });
    });
  </script>
</body>
</html>